<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="extjs-4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4/bootstrap.js"></script>
<script type="text/javascript" src="extjs-4/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="icons/icons.css" />
</head>
<body>
<script type="text/javascript">
	Ext.onReady(function() {
		Ext.define('My.own.Window', {
		    /** @readonly */
		    isWindow: true,

		    config: {
		        title: 'Title Here',

		        bottomBar: {
		            height: 50,
		            resizable: false
		        }
		    },

		    constructor: function(config) {
		        this.initConfig(config);
		    },

		    applyTitle: function(title) {
		        if (!Ext.isString(title) || title.length === 0) {
		            alert('Error: Title must be a valid non-empty string');
		        }
		        else {
		            return title;
		        }
		    },

		    applyBottomBar: function(bottomBar) {
		        if (bottomBar) {
		            if (!this.bottomBar) {
		                return Ext.create('My.own.WindowBottomBar', bottomBar);
		            }
		            else {
		                this.bottomBar.setConfig(bottomBar);
		            }
		        }
		    }
		});

		/** A child component to complete the example. */
		Ext.define('My.own.WindowBottomBar', {
		    config: {
		        height: undefined,
		        resizable: true
		    }
		});
		
		var myWindow = Ext.create('My.own.Window', {
		    title: 'Hello World',
		    bottomBar: {
		        height: 60
		    }
		});
		
		alert(myWindow.getTitle()); // alerts "Hello World"

		myWindow.setTitle('Something New');

		alert(myWindow.getTitle()); // alerts "Something New"

		myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

		myWindow.setBottomBar({ height: 100 });

		alert(myWindow.getBottomBar().getHeight()); // alerts 100
		
	});
</script>
</body>
</html>
